<template>
	<div style="z-index: 9999; overflow: hidden;" v-if="status">
		<!-- 蒙版 -->
		<div class="position-fixed top-0 left-0 right-0 bottom-0 z-index" v-if="mask" :style="getMaskColor" @click="hide"></div>
		<!-- 弹出框内容 -->
		<div ref="popup" class="position-fixed free-animated z-index" :class="getBodyClass" :style="getBodyStyle">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	// #ifdef APP-PLUS-NVUE
	const animation = weex.requireModule('animation')
	// #endif
	
	// 这里需要考虑弹出层是否需要蒙版在特定情况下，以及自定义蒙版颜色等
	// 弹出层出现情况：根据位置定位、处于底部
	// 长按位置弹出弹出层并且根据长按的位置进行显示
	export default {
		name: "liweijian-popup",
		props: {
			// 蒙版颜色
			maskColor: {
				type: Boolean,
				default: false
			},
			// 是否需要开启蒙版
			mask: {
				type: Boolean,
				default: true
			},
			// 是否居中
			center:{
				type:Boolean,
				default:false
			},
			// 是否出于底部
			fixedBottom: {
				type: Boolean,
				default: false
			},
			// 弹出层背景颜色
			bodyBgColor:{
				type:String,
				default:"bg-white"
			},
			// 边界问题
			// 弹出层内容高度
			bodyWidth: {
				type: [Number, String],
				default: 0
			},
			// 弹出层内容宽度
			bodyHeight: {
				type: Number,
				default: 0
			},
			// 动画缩放中心
			transformOrigin:{
				type:String,
				default:"left top"
			},
			// tabbar高度
			tabbarHeight:{
				type:Number,
				default:0
			},
		},
		data() {
			return {
				// 显示/隐藏
				status: false,
				x: -1,
				y: -1,
				maxX: 0,
				maxY: 0,
			};
		},
		mounted() {
			try {
				const res = uni.getSystemInfoSync();
				this.maxX = res.windowWidth - uni.upx2px(this.bodyWidth);
				this.maxY = res.windowHeight - uni.upx2px(this.bodyHeight) - uni.upx2px(this.tabbarHeight);
			} catch (e) {}
		},
		computed: {
			// 蒙版颜色
			getMaskColor() {
				let i = this.maskColor ? 0.5 : 0;
				return `background-color: rgba(0,0,0,${i});`
			},
			// 弹出层出现位置--处于底部
			getBodyClass() {
				if(this.center) {
					return 'left-0 right-0 bottom-0 top-0 flex align-center justify-center';
				}
				let fixedBottom = this.fixedBottom ? 'left-0 right-0 bottom-0' : 'rounded border';
				return `${this.bodyBgColor} ${fixedBottom}`;
			},
			// 弹出层位置--未处于底部
			getBodyStyle() {
				let left = this.x > -1 ? `left: ${this.x}px` : '';
				let top = this.y > -1 ? `top: ${this.y}px` : '';
				return `${left}; ${top}`;
			},
		},
		methods: {
			// 显示
			show(x = -1, y = -1) {
				if (this.status) {
					return;
				}

				// 弹窗位置边界值判断
				this.x = (x > this.maxX) ? this.maxX : x;
				this.y = (y > this.maxY) ? this.maxY : y;

				this.status = true;
				
				// 动画
				// #ifdef APP-PLUS-NVUE
				this.$nextTick(()=>{
					animation.transition(this.$refs.popup, {
					    styles: {
					        transform: 'scale(1,1)',
							transformOrigin:this.transformOrigin,
							opacity:1
					    },
					    duration: 100, //ms
					    timingFunction: 'ease',
					    }, function () {
					       console.log('动画执行结束');
					    })
				});
				// #endif
			},
			// 隐藏
			hide() {
				this.$emit('hide');
				// #ifdef APP-PLUS-NVUE
				animation.transition(this.$refs.popup, {
				styles: {
					transform: 'scale(0,0)',
					transformOrigin:this.transformOrigin,
					opacity:0
				},
				duration: 100, //ms
				timingFunction: 'ease',
				}, ()=> {
					this.status = false
				   console.log('动画执行结束');
				});
				// #endif
				this.status = false;
			},
		},
	}
</script>

<style scoped>
	.free-animated {
		/* #ifdef APP-PLUS-NVUE */
		transform: scale(0, 0);
		opacity: 0;
		/* #endif */
	}

	.z-index {
		/* #ifndef APP-NVUE */
		z-index: 9999;
		/* #endif */
	}
</style>